<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YUMO.AI 系统登录</title>
    <link rel="stylesheet" href="/css/common.css">
    <link th:href="@{/css/login.css}" rel="stylesheet">
    <link rel="stylesheet"
          href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/element-ui/2.15.14/lib/theme-chalk/index.css">
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.4.0/all.min.css"
          rel="stylesheet">
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/vue/2.6.14/vue.min.js"></script>
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/element-ui/2.15.14/index.js"></script>
</head>
<body>
<div class="login-container" id="login_app" v-cloak>
    <div class="login-header">
        <div class="logo">
            <i class="fas fa-lock"></i>
        </div>
        <h2>欢迎登录 YUMO.AI</h2>
        <p>请输入您的账号密码</p>
    </div>

    <form id="loginFrom">
        <!-- 用户名输入框 -->
        <div class="form-group">
            <label for="username" class="input-label">用户名</label>
            <div class="highlight-box">
                <input type="text" v-model="form.username" id="username" name="username" class="input-field"
                       placeholder="请输入用户名" maxlength="24"
                       required>
            </div>
        </div>
        <!-- 密码输入框 -->
        <div class="form-group">
            <label for="password" class="input-label">密码</label>
            <div class="highlight-box">
                <input type="password" v-model="form.password" id="password" name="password" class="input-field"
                       placeholder="请输入密码" maxlength="32"
                       required>
            </div>
        </div>
        <!-- 记住我选项 -->
        <div class="remember-me">
            <input type="checkbox" v-model="form.rememberMe" id="rememberMe" name="remember-me">
            <label for="rememberMe">记住密码</label>
        </div>
        <!-- 登录按钮 -->
        <button type="button" id="loginBtn" class="btn-login" @click="handleLogin">登录</button>
    </form>

    <!-- 其他登录方式 -->
    <div class="other-login">
        <div class="divider">
            <span>其他登录方式</span>
        </div>
        <a th:href="@{/login/sms(redirect=${param.redirect})}" class="sms-login-link">
            <i class="fas fa-mobile-alt"></i>
            验证码登录
        </a>
    </div>
</div>
<script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/axios/0.19.0/axios.min.js"></script>
<script th:src="@{/js/request.js}"></script>
<script th:src="@{/js/api_robot.js}"></script>
<script th:src="@{/js/login.js}"></script>
</body>
</html>